<!--编辑详情-->
<template>
  <el-dialog
    class='viewDetailsdialog advert'
    title="编辑"
    :closeOnClickModal='false'
    :visible="true"
    size="small"
    :before-close="handleClose"
    append-to-body
  >
    <!--表单-->
    <el-form v-loading="loading" :model="ruleForm" :rules="rules" ref="ruleForm"   label-width="100px" >
      <el-row >
        <el-col :span="24">
          <el-form-item label="广告类型" prop="type"  >
            <el-select v-model="ruleForm.type" clearable placeholder="请选择广告类型" @change="currentSel">
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="hidden.showAppId">
        <el-col :span="12">
          <el-form-item label="appID" prop="appId" >
            <el-input v-model='ruleForm.appId'/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="hidden.showLink">
        <el-col :span="12">
          <el-form-item :label="hidden.linkName" prop="url" >
            <el-input v-model='ruleForm.url'/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row >
        <el-col :span="24">
          <el-form-item label="广告图片" prop="adPicture">
            <el-upload
              :action="uploadUrl"
              list-type="picture-card"
              :class="{disabled:uploadNum==1}"
              :limit="limit"
              :file-list="picList"
              :on-preview="handlePictureCardPreviewAdPicture"
              :on-success="successUploadAdPicture"
              :before-upload="beforeUpload"
              :on-remove="handleRemoveAdPicture">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisibleAdPicture" size="tiny">
              <img width="100%" :src="dialogImageUrlAdPicture" alt="">
            </el-dialog>
            <div>图片建议尺寸:347x66像素,大小<=200KB</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="hidden.showConduct">
        <el-col :span="24">
          <el-form-item label="宣传图片" prop="propagandaPicture">
            <el-upload
              :action="uploadUrl"
              list-type="picture-card"
              :class="{disabled:uploadNumPro==1}"
              :limit="limit"
              :file-list="proList"
              :on-preview="handlePictureCardPreviewPro"
              :on-success="successUploadPro"
              :on-remove="handleRemovePro">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisiblePro" size="tiny">
              <img width="100%" :src="dialogImageUrlPro" alt="">
            </el-dialog>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span='4' :offset='10'>
          <el-button @click="submitForm('ruleForm')" style='color:#fff;background-color: #00b1a5'>确定修改</el-button>
        </el-col>
      </el-row>

    </el-form>
  </el-dialog>
</template>
<script>
  export default ({
    name:'subBannerDeatil',
    data(){
      return{
        typeOptions:[{
          value:'0',
          label:'公众号推文'
        },{
          value:'1',
          label:'小程序内页面'
        },{
          value:'2',
          label:'宣传图'
        },{
          value:'3',
          label:'小程序'
        }],
        hidden:{
          showAppId:false,
          showLink:true,
          linkName:'跳转链接',
          showConduct:false,
        },
        uploadNum:0,
        picList:[],
        proList:[],
        uploadNumPro:0,
        limit:1,
        dialogImageUrlAdPicture: '',
        dialogVisibleAdPicture: false,
        dialogImageUrlPro: '',
        dialogVisiblePro: false,
        editIndex:'',
        typeMap:{},
        loading:false,
        uploadUrl:'https://lht.ah-zk.com/qjt/fs/file/upload',
        origin:'https://lht.ah-zk.com/qjt/fs/origin',
        //广告轮播对象
        ruleForm:{
          adPicture:'',
          propagandaPicture:'',
          appId:'',
          url:'',
          type:''
        },
        refreshKey: '',
        //验证
        rules: {
          adPicture: [
            { required: true, message: '广告图片不能为空', trigger: 'blur' }
          ],
          propagandaPicture: [
            { required: true, message: '宣传图片不能为空', trigger: 'blur' }
          ],
          appId: [
            { required: true, message: 'appId不能为空', trigger: 'blur' }
          ],
          url: [
            { required: true, message: '链接不能为空', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '请选择类型', trigger: 'blur' }
          ]
        },
      }
    },
    props:["editData","index"],
    created(){
      this.dataInit();
    },
    methods:{
      //初始化方法
      dataInit(){
        this.ruleForm = this.editData;
        if(this.editData.adPicture){
          let json ={
            name:'aa',
            url:this.origin+"/"+this.editData.adPicture
          }
          this.picList.push(json);
          this.uploadNum=1;
        }
        if(this.editData.propagandaPicture){
          let json ={
            name:'aa',
            url:this.origin+"/"+this.editData.propagandaPicture
          }
          this.proList.push(json);
          this.uploadNumPro=1;
        }
        this.editIndex = this.index;
        this.currentSel(this.editData.type);
      },
      //文件上传时做文件大小判断
      beforeUpload(file){
        const isLt2M = file.size / 1024 / 1024 < 0.2
        if(!isLt2M) {
          this.$message({
            message: '上传文件大小不能超过 200KB!',
            type: 'warning'
          });
        }
        return isLt2M;
      },
      //图片上传删除图片
      handleRemoveAdPicture(file, fileList) {
        this.uploadNum=0;
      },
      //图片放大方法
      handlePictureCardPreviewAdPicture(file) {
        this.dialogImageUrlAdPicture = file.url;
        this.dialogVisibleAdPicture = true;
      },
      //图片上传成功回调
      successUploadAdPicture(response,file,fileList){
        let f = response.files[0];
        this.ruleForm.adPicture = f.fingerprint;
        this.uploadNum=1;
      },
      //宣传图片上传删除图片
      handleRemovePro(file, fileList) {
        this.uploadNumPro=0;
      },
      //宣传图片放大方法
      handlePictureCardPreviewPro(file) {
        this.dialogImageUrlPro = file.url;
        this.dialogVisiblePro = true;
      },
      //宣传图片上传成功回调
      successUploadPro(response,file,fileList){
        let f = response.files[0];
        this.ruleForm.propagandaPicture = f.fingerprint;
        this.uploadNumPro=1;
      },
      //改变下啦选相框值
      currentSel(val){
        if(val === '0'){
          //表示公众号推文
          this.hidden.showAppId=false;
          this.hidden.showLink=true;
          this.hidden.linkName='跳转链接';
          this.hidden.showConduct=false;
        }else if(val === '1'){
          //表示小程序内页面
          this.hidden.showAppId=false;
          this.hidden.showLink=true;
          this.hidden.linkName='页面链接';
          this.hidden.showConduct=false;
        }else if(val === '2'){
          //表示宣传图
          this.hidden.showAppId=false;
          this.hidden.showLink=false;
          this.hidden.linkName='';
          this.hidden.showConduct=true;
        }else if(val === '3'){
          //小程序
          this.hidden.showAppId=true;
          this.hidden.showLink=true;
          this.hidden.linkName='小程序路径';
          this.hidden.showConduct=false;
        }
      },
      //关闭弹框
      handleClose() {
        this.$emit('handleclose',this.ruleForm,this.editIndex);
      },
      closedetails(){
        this.$emit('handleclose');
      },
      //提交的表单验证
      submitForm(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.handleClose();
          } else {
            return false;
          }
        });
      },
      empty(){
        this.ruleForm={
          "adPicture":'',
          "propagandaPicture":'',
          "appId":'',
          "url":'',
          "type":''
        };
        this.$refs.uploadcarousal.clearFiles();
      }
    },
    watch:{

    },
    components:{
    }
  })
</script>
<style>
  .disabled .el-upload--picture-card {
    display: none;
  }
</style>
<style lang="stylus">
  .advert{
  .el-dialog--tiny{
    width 1024px!important
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    line-height: 148px;
    text-align: center;
  }
  .avatar {
    width: 148px;
    height: 148px;
    display: block;
  }
  }
</style>
<style lang="stylus" scoped>
  .tips{
    position :absolute;
    right:-110px;
    top:0px;
  }
  .spendsunit{
    position :absolute;
    top :0;
    right:-20px;
  }
  /*表达验证格式修改 */
    .el-form-item__error {
      color: #ff4949;
      font-size: 12px;
      line-height: 0 !important;
      padding-top: 0px !important;
      position: absolute;
      top: 100%;
      left: 0;
    }
  .el-row{
    margin-bottom 10px;
  }
</style>

